<template>
    <div id="cart">
        <div class="cart--header has-text-centered">
            <i class="fa fa-2x fa-shopping-cart"></i>
        </div>
        <ul>
            <li v-for="cartItem in cartItems" :key="cartItem.id" class="cart-item">
                <cart-list-item :cart-item="cartItem"></cart-list-item>
            </li>
            <div class="cart-details">
                <p>Total Quantity:
                    <span class="has-text-weight-bold">
                        {{totalQuantity}}
                    </span>
                </p>
                <p class="cart-remove-all--text" @click="removeAllCartItems">
                    <i class="fa fa-trash"></i>Remove all
                </p>
            </div>
        </ul>
        <button :disabled="!cartItems.length" class="button is-primary">
            Checkout (<span class="has-text-weight-bold">${{cartTotal}}</span>)
        </button>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import {cartStore} from "@/store/cart/CartStore";
import CartListItem from "@/components/cart/CartListItem.vue";
import {Cart} from "@/model/Cart";

@Component({
    components: {CartListItem}
})
export default class CardList extends Vue {
    name = 'CardList';

    private get cartItems(){
        return cartStore.getAllCarts;
    }

    private get totalQuantity(){
        return cartStore.cartQuantity;
    }

    private get cartTotal(){
        return cartStore.cartTotal;
    }

    private removeAllCartItems(){
        cartStore.removeAllCartItems();
    }
    created(){
        cartStore.getCartItems();
    }
}
</script>

<style scoped>
#cart {
    height: 100%;
    padding: 30px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cart-empty-text {
    padding: 10px 0;
}

.cart--header {
    border-bottom: 1px solid #E8E8E8;
    padding-bottom: 15px;
}

.cart-item {
    padding: 10px 0;
}

.cart-details {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    padding: 15px;
}

.cart-remove-all--text {
    cursor: pointer;
}

.cart-remove-all--text .fa {
    padding-right: 5px;
}
</style>
